<!--
 * @Author: zi.yang
 * @Date: 2021-03-12 19:08:21
 * @LastEditors: zi.yang
 * @LastEditTime: 2021-03-12 19:40:42
 * @Description: In User Settings Edit
 * @FilePath: \vue-music\src\components\state2\test-event.vue
-->

<template>
  <div class="border">
    <div>
      <div>点击次数： {{ count }}</div>
      <button @click="handleClick()">点击按钮+1</button>
    </div>
  </div>
</template>

<script>
import { reactive, toRefs } from '@vue/composition-api';

export default {
  name: 'test-event',

  setup() {
    const state = reactive({
      count: 0,
      handleClick: () => {
        state.count += 1;
      },
    });

    return toRefs(state);
  },
};
</script>

<style scoped>
.border {
  font-size : 16px;
  width : 270px;
  height : 70px;
  display : flex;
  border : 1px solid red;
  margin : 10px;
  box-shadow : skyblue 5px 5px 5px;
}
.border > div {
  width : 260px;
  display : flex;
  align-items : center;
  justify-content : center;
}
.border > div > button {
  width : 90px;
  height : 30px;
}
.border > div > * {
  margin : 0 10px 0 10px;
}

</style>
